<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">

    <link href="css/order_detail.css" rel="stylesheet">
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/head.js"></script>

    <script src="js/mock.js"></script>
    <script src="mock/orders.js"></script>

    <div class="head"></div>
    <div class="nav_head"></div>

    <div class="main"></div>


    <script>
        $('document').ready(function(){
            
            let user = hasLogin()

            if(!user){
                alert("请先登录")
                return
            }

            let username = user.username

            let paramter = getURIParameter(location.search.substring(1))

            let order_number = paramter['order_number']

            if(!order_number){
                location.href = 'order_detail.html'
                return
            }

            else{
                let data = {
                    order_number,
                    username
                }

                data = JSON.stringify(data)
                $.ajax({
                    data,
                    url:baseUrl + 'get_order.php',
                    type:'POST',
                    success: function(res){
                        if(typeof(res) == 'string'){
                            res = JSON.parse(res)
                        }
                        
                        
                        if(res.code == 200){
                            console.log(res)
                            render(res.data)
                        }

                        else{
                            render(null)
                        }
                    }
                })
            }

            function payEvent(){
                $("#pay").click(function(){
                    let data = {
                        username,
                        order_number
                    }

                    data = JSON.stringify(data)

                    $.ajax({
                        data,
                        url: baseUrl + "commit_order.php",
                        type: 'POST',
                        success: function(res){
                            if(typeof(res) == 'string')
                                res = JSON.parse(res)
                            if(res.code == 200){
                                alert(res.msg)
                                location.href = "orders.html"
                            }else alert(res.msg)
                        }
                    })
                })
            }

            function render(data){
                let pet_list = data.pet_list

                let status = data.status

                if(status == '0') status = '待支付'
                else if(status == '1') status = '已下单'
                else if(status == '2') status = '已发货'
                else if(status == '3') status = '已收货'
                else status = '未知'

                if(!data){
                    $('.main').html(`
                        <h2 style="text-align:center;">暂无订单详情</h2>
                    `)

                    return
                }

                $('.main').html(`
                    <h2>订单详情 ( ${data.order_number} )</h2>
                    <div class="info">
                        <h2 style="text-align:center;">￥${data.totalPrice}</h2>    
                        <div style="text-align:end;"><b>${data.date}</b></div>
                    </div>
                `)

                $('.main').append(`
                    <table>
                        <thead>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </thead>
                        
                        <tbody>
                        </tbody>
                    </table>        
                `)
                
                
                for(let i = 0; i < pet_list.length; i++){
                    $('.main tbody').append(`
                        <tr>
                            <td><img src="${baseUrl + pet_list[i].image}"></td>    
                            <td>${pet_list[i].name}</td>    
                            <td>${pet_list[i].number}</td>    
                            <td>${pet_list[i].price}</td>    
                        </tr>
                    `)
                }

                $('.main').append(`
                    <h2 class="status" style="text-align:end;" >${status}</h2>
                `)

                
                if(data.status == '0'){
                    $('.main').append(`
                        <div style="width:30%;margin-top:20px;">
                            <div class="button" id="pay">支付</div>
                        </div>
                    `)
                    payEvent()
                }
            }
        })
    </script>
</body>
</html>